import mapboxgl from 'mapbox-gl';

import { gradualColorRampList } from '#/assets/style';
import { echarts, getColorArray } from '#/utils';

class ChartRender {
  constructor(map) {
    this.map = map;
    this.colorRampList = gradualColorRampList.slice(0, -1); // 去除最后一个
    //  存储实例对象，方便销毁
    this.echartLists = {};
    this.mapMarkers = {};
    this.option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a}<br/>{b} : {c} ({d}%)',
      },
      series: [
        {
          name: 'Access From1',
          type: 'pie',
          radius: '50%',
          label: {
            // show: false,
            formatter: '{c}',
            position: 'inside',
            fontSize: 10,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    // this.option = {
    //   tooltip: {
    //     trigger: 'item',
    //   },
    //   xAxis: {
    //     show: false, // 隐藏x轴
    //   },
    //   yAxis: {
    //     show: false, // 隐藏y轴
    //   },
    //   series: [{
    //     type: 'bar',
    //     data: [10, 20], // 柱状图数据
    //     // barWidth: 20, // 柱子宽度
    //     barCategoryGap: '0%', // 设置类目间柱子间距为0
    //     itemStyle: {
    //       color: function (params) { // 设置柱子颜色
    //         var colorList = ['#c23531', '#2f4554'];
    //         return colorList[params.dataIndex % colorList.length];
    //       }
    //     }
    //   }]
    // };
  }

  // 加载专题地图
  addThematicEchartLayer(
    type,
    {
      coordinate,
      colorRamp,
      chartOptions,
      dataOption,
      seriesOption,
      layerId,
      chartWidth,
      chartHeight,
    },
  ) {
    // 根据图层初始化对应的实例存储器
    if (!this.mapMarkers[layerId]) {
      this.mapMarkers[layerId] = [];
    }
    if (!this.echartLists[layerId]) {
      this.echartLists[layerId] = [];
    }
    const dom = document.createElement('div');
    dom.style = `height:${chartHeight / 1.5}px;width:${chartWidth / 1.5}px;`;
    this.mapMarkers[layerId].push(
      new mapboxgl.Marker(dom, {
        // offset: [-50 / 2, -50 / 2]
      })
        .setLngLat([coordinate[0], coordinate[1]])
        .addTo(this.map),
    );
    if (type === 'pie') {
      if (colorRamp === 'echarts_light') {
        delete chartOptions.series[0].itemStyle;
      } else {
        const colorList = this.getColorRampArray(colorRamp, dataOption.length);
        const itemStyle = {
          color: (params) => colorList[params.dataIndex % colorList.length], // 设置要素颜色
        };
        chartOptions.series[0].itemStyle = itemStyle;
      }
      chartOptions.series[0].label.labelSize /= 1.5;
      chartOptions.series[0].data = dataOption;
    } else if (type === 'bar') {
      if (colorRamp === 'echarts_light') {
        delete chartOptions.series[0].itemStyle;
      } else {
        const colorList = this.getColorRampArray(
          colorRamp,
          seriesOption.length,
        );
        seriesOption.forEach((item, index) => {
          item.itemStyle = { color: colorList[index] };
        });
      }
      chartOptions.dataset.source[0] = dataOption;
      chartOptions.series = seriesOption;
    }
    // console.log(chartOptions);

    // echart初始化专题图
    const chart = this.initEchart(dom, chartOptions);

    this.echartLists[layerId].push(chart);
  }

  // 清除echart及marker
  clearEchartInstantAndMarkers(layerId) {
    // console.log(this.echartLists);
    this.echartLists[layerId] &&
      this.echartLists[layerId].forEach((echart) => {
        echart.dispose();
      });
    this.mapMarkers[layerId] &&
      this.mapMarkers[layerId].forEach((marker) => {
        marker.remove();
      });
  }

  // 类方法重写外部方法
  getColorRampArray = (colorRampName, num) => {
    const colorRamp = this.colorRampList.find(
      (ramp) => ramp.name === colorRampName,
    ).ramp;
    return getColorArray(colorRamp, num);
  };

  // 初始化echart表
  initEchart(element, options) {
    const chart = echarts.init(element);
    chart.setOption(options);
    return chart;
  }
}

export default ChartRender;
